<template>
  <n-card class="card">
    <div class="info-header">
      <search-box :keyword="keyword" @search="searchVideo"></search-box>
    </div>
    <n-table class="table" striped>
      <thead class="table-head">
      <tr>
        <th>VID</th>
        <th>封面</th>
        <th>标题</th>
        <th>简介</th>
        <th>分区</th>
        <th>作者UID</th>
        <th>上传时间</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody class="table-body">
      <tr v-for="item in videoList">
        <td>{{ item.vid }}</td>
        <td>
          <img class="cover" :src="item.cover" alt="视频封面">
        </td>
        <td>{{ item.title }}</td>
        <td>{{ item.desc }}</td>
        <td>{{ item.partition }}</td>
        <td>{{ item.uid }}</td>
        <td>
          <n-time :time="new Date(item.created_at)"/>
        </td>
        <td class="btn-list">
          <n-button text @click="searchAuthor(item.uid)">查找作者</n-button>
          <n-button text @click="deleteVideo(item.vid)">删除</n-button>
        </td>
      </tr>
      </tbody>
    </n-table>
    <div class="pagination">
      <n-pagination v-model:page="page" :item-count="count" :page-size="6" @update-page="pageChange"/>
    </div>
  </n-card>
</template>

<script lang="ts">
import {videoType} from '@/types/video';
import {defineComponent, onBeforeMount, ref} from 'vue';
import {useRouter} from 'vue-router';
import SearchBox from '@/components/SearchBox.vue';
import {getVideoListAPI, searchVideoAPI, deleteVideoAPI} from '@/api/video';
import {NTable, NButton, NCard, NTime, NPagination, useNotification} from 'naive-ui';

export default defineComponent({
  setup() {
    const page = ref(1);
    const count = ref(0);
    const videoList = ref<Array<videoType>>([]);
    const notification = useNotification();//通知

    const getVideoList = () => {
      getVideoListAPI(page.value, 6).then((res) => {
        if (res.data.code === 2000) {
          count.value = res.data.data.count;
          videoList.value = res.data.data.videos;
        }
      }).catch((err) => {
        console.error(err)
        notification.error({title: '加载视频失败', duration: 5000})
      });
    }

    //页码改变
    const pageChange = (target: number) => {
      page.value = target;
      getVideoList();
    }

    //查找作者
    const router = useRouter();
    const searchAuthor = (uid: number) => {
      router.push({name: 'User', query: {uid: uid}});
    }

    //搜索
    const keyword = ref('');
    const searchVideo = (keyword: string) => {
      page.value = 1;
      count.value = 0;
      if (!keyword) {
        getVideoList();
        return;
      }
      searchVideoAPI(keyword).then((res) => {
        if (res.data.code === 2000) {
          videoList.value = res.data.data.videos;
        }
      })
    }

    //删除
    const deleteVideo = (id: number) => {
      deleteVideoAPI(id).then((res) => {
        if (res.data.code === 2000) {
          getVideoList();
        }
      }).catch((err) => {
        notification.error({title: '删除失败', duration: 5000})
      });
    }

    onBeforeMount(() => {
      getVideoList();
    })

    return {
      page,
      count,
      keyword,
      videoList,
      pageChange,
      searchAuthor,
      searchVideo,
      deleteVideo
    }
  },
  components: {
    NTable,
    NCard,
    NTime,
    NButton,
    SearchBox,
    NPagination,
  }
});
</script>

<style lang="less" scoped>
.card {
  margin: 10px;
  width: calc(100% - 20px);
  border-radius: 10px;

  .info-header {
    float: right;
    height: 30px;
    width: 300px;
    margin-bottom: 20px;
  }

  .table {

    .table-head {
      text-align: center;
    }

    .table-body {
      text-align: center;

      .cover {
        height: 60px;
        width: 100px;
      }

      .btn-list {
        button {
          margin: 0 6px;
        }
      }
    }
  }
}

.pagination {
  margin-top: 20px;
}
</style>